<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第7天课后实训</title>
    <link rel="stylesheet" href="css/ex7.css">
</head>
<body>
<div class="container">
    <!--页首-->
    <header>
        <!--logo-->
        <img src="img/logo.png" width="105" height="46" alt="logo" />
        <!--nav-->
        <nav>
            <ul class="nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Features</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <!--页面主体内容-->
    <div class="content">
        <!--banner-->
        <div class="banner">
            <h2>HTML5</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            <a href="#">READ MORE</a>
        </div>
        <!--.左侧内容 -->
        <div class="left-content">
            <h3>Latest Works</h3>
            <div class="classic">
                <img src="img/car.jpg" alt="car">
                <h4>Mobile App</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
            </div>
            <div class="classic cl2">
                <img src="img/web_app1.jpg" alt="web">
                <h4>Mobile App</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
            </div>
            <div class="classic">
                <img src="img/mobile_app1.jpg" alt="mobile">
                <h4>Mobile App</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p>
            </div>
        </div>
        <!--.右侧内容 -->
        <div class="right-content">
            <h3>Why graVis?</h3>
            <ul>
                <li><a href="#">Fully responsive so your content will always look good on any screen size</a></li>
                <li><a href="#">Awesome sliders give you the opportunity to showcase important content</a></li>
                <li><a href="#">Tested on iPhone and iPad with Retina Display</a></li>
                <li><a href="#">Multiple layout options for home pages, portfolio section & blog section</a></li>
                <li><a href="#">We offer very good support because we care about your site as much as you do</a></li>
                <li><a href="#">Over 400 Icons</a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>